<template>
	<view>
		<view class="top-note-box">
			<view class="title">
				<text>说明：</text>
			</view>
			<view class="content">
				<text>商铺的操作按钮用于进行商铺相关的各种操作。</text>
			</view>
			
		</view>

		<unicloud-db ref="udb" collection="tian-mall-shops"
			field="ID,address,banner,shop_name,shop_desc,online,phone,logo_src,state" :where="where" page-data="replace"
			:orderby="orderby" :getcount="true" :page-size="options.pageSize" :page-current="options.pageCurrent"
			v-slot:default="{data,pagination,loading,error,options}" :options="options" @load="loadData">
			<uni-table :loading="loading" :emptyText="error.message || '没有更多数据'" border stripe>
				<uni-tr>
					<uni-th align="center">商户名称</uni-th>
					<uni-th width="450rpx" align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in data" :key="index">

					<uni-td align="center">
						<view class="">
							<text>商户ID：{{item.ID}} </text>
						</view>
						<view class="">
							<text>{{item.shop_name.short_name}} </text>
						</view>
						<view class="">
							<text>{{item.shop_name.full_name}} </text>
						</view>
					</uni-td>
					<uni-td align="center" class="act-btn-box">
						<button size="mini" type="primary" @click="editShop(item)">修改商铺配置</button>
						<button size="mini" type="primary" @click="navtoShopPage(item)">浏览页面效果</button>
						<button size="mini" type="primary" @click="navtoProductPage(item)">产品列表和管理</button>
					</uni-td>
				</uni-tr>
			</uni-table>

		</unicloud-db>
		<view class="btn-box">
			<button style="width: 30%;" type="default" @click="navBack">返回</button>
		</view>

		<!-- <view class="">
			<button type="default" @click="test">test</button>
		</view> -->
	</view>
</template>

<script>
	import {
		mapActions,
	} from 'vuex';
	import {
		// store as uniIdStore,
		mutations as uniIdMutations
	} from '@/uni_modules/uni-id-pages/common/store.js';
	import commMixinWjf from '@/common/mixin/common-mixin-wjf.js'
	const db = uniCloud.database()
	// 表查询配置
	const dbOrderBy = 'ID asc' // 排序字段
	// const dbSearchFields = ['shop_name.full_name','address.address_number','phone.head'] // 模糊搜索字段，支持模糊搜索的字段列表
	// 分页配置
	const pageSize = 10
	const pageCurrent = 1
	export default {
		mixins: [commMixinWjf],
		data() {
			return {
				orderby: dbOrderBy,
				selectedIndexs: [],
				options: {
					pageSize,
					pageCurrent,
				},
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo
			},
			shopID() {
				return this.userInfo.shop_ID ? this.userInfo.shop_ID : []
			},
			where() {
				// return `${new RegExp(this.userInfo.mobile)}.test(phone.head) && isBounded == false`
				return {
					ID: db.command.in(this.shopID)
				}
			}
		},
		methods: {
			test() {
				console.log(this.shopID);
				db.collection('tian-mall-shops').where(this.where).field('shop_name,address').get().then(res => {
					console.log(res);
				})
			},
			...mapActions({
				getUserInfo: 'user/getUserInfo',
			}),
			// 成功的回调
			loadData(e) {
				console.log(e);
			},
			navBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			navtoProductPage(item){
				uni.navigateTo({
					url: `/pages/shop/product-page?id=${item._id}&shopID=${item.ID}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			navtoShopPage(item){
				uni.navigateTo({
					url: `/pages/shop/shop?id=${item._id}&shopID=${item.ID}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			editShop(item){
				uni.navigateTo({
					url: `/pages/shop/edit-shop?id=${item._id}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.top-note-box {
		margin: 20rpx 20rpx;
		// background-color: #fff;
		padding: 20rpx;

		.title {
			font-size: 32rpx;
			color: #555;
			font-weight: 550;
		}

		.content {
			font-size: 28rpx;
			color: #777;
			margin: 10rpx 0;
		}
	}

	.btn-box {
		width: 100%;
		margin-top: 100rpx;
		display: flex;
	}
	.act-btn-box{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		button{
			margin: 10rpx 15rpx;
		}
	}
</style>